Skip to main content

Configuring conditional visibility in Constellation Views

3 Tasks

30 mins

 Pega Platform '23 Visible to: All users
Intermediate Pega Platform '23 Constellation User Experience English

Scenario

Work on the Tell Us More application from Sweet Life Inc. continues. In this challenge, you are tasked with configuring the View associated with the Contact Info Step. In addition to creating Customer data relationship for this View, you configure the conditional Visibility for the Address field.

The following table provides the credentials you need to complete the challenge:

Role User name Password
System Architect Author@SL pega123!
Note: Your practice environment may support the completion of multiple challenges. As a result, the configuration shown in the challenge walkthrough may not match your environment exactly.

You must initiate your own Pega instance to complete this Challenge.

Initialization may take up to 5 minutes so please be patient.

Challenge Walkthrough

Detailed Tasks

1 Configure the Customer data relationship

  1. In the Pega instance for the challenge, enter the following credentials:
    1. In the User name field, enter Author@SL.
    2. In the Password field, enter pega123!
  2. In the navigation pane of App Studio, click Case Types > Incident to open the Incident Case Type.
  3. Click the Data Model tab.
  4. Add a new data relationship field with the following details:
    1. In the Field name field, enter Customer.
    2. In the Type list, select Embedded Data.
    3. In the Data object list, select Customer.
    4. In the Options section, select Single record.
    5. Click Submit.
      Details of the new Customer field.
  5. Click Save.

2 Create the Contact Info View

  1. In the Incident Case Type, click the Workflow tab.
  2. Click the Contact Info Step, and then in the contextual properties pane, click Configure View.
  3. In the Fields section, add the Customer data relationship field to the View.
  4. In the Customer (Customer) row, click the Gear icon, and then confirm that the following settings are active:
    1. The value of the Display as field is Form.
    2. The value of the Field label field is Customer.
    3. The value of the View is Contact Info - Customer.
    4. Click Save.
      Configuration setting for the Customer field.
  5. Click Customer (Customer) to open the Edit View: Customer window.
    Note that the Customer View already contains four fields. These fields were designated as Primary when the Customer data object was created. 
    Primary fields in the Customer View and Customer data object.
  6. In the Customer View, delete the Primary Fields field by clicking the Remove icon.
  7. Click Add > Views > Main Info > Add to add a previously-created View called Main info from the Customer data object.
    The Main Info View.
  8. Click Add > Fields > Address Mode > Add to add address information under the Main info View in the Customer View.
  9. In the Address Mode field row, click the Gear icon, and then configure the following settings:
    1. In the Display as list, select Radio buttons.
    2. In the Field label field, enter How would you like to provide your address?
    3. Select the Horizontal display checkbox.
    4. In the Required list, select Always.
    5. Click Save.

3 Add Address information to the Customer View

  1. Click Add > Views > Create new View to create a new View to collect the customer's address information by using a map, and then configure the following settings for the View:
    1. In the Name field, enter Address - Using map.
    2. Select Default form.
    3. Click Submit.
      Create the Address - Using map View.
  2. In the Edit View: Address Using map window, click Add > Fields > Address > Fields > Location > Add to add a Location field.
    Adding Location field to Address-Using map View.
  3. In the Location field row, click the Gear icon, select the Show map checkbox, and then click Save.
    The Show map configuration for the Location field.
  4. Click Back to return to the Edit View: Customer window.
  5. Add conditional Visibility to the Address - Using map View:
    1. In the Address - using map field row, click the Gear icon.
    2. In the Heading field, enter Address.
    3. In the Visibility list, select Custom Condition.
    4. To the right of Visibility list, click the Gear icon.
    5. Set the Condition to Address Mode is equal to "Using map".
    6. Click Submit.
      The Condition builder for Using map.
    7. Click Save.
  6. In the Fields section of the Edit View: Customer window, click Add > Fields > Address > Add to add the Address field from the Case Type Data Model to the Customer View.
    Note:  The Data-Address-Postal data type drives the Address field functionality.
  7. Configure conditional Visibility for the Address field:
    1. In the Address field row, click the Gear icon.
    2. In the Conditions section, in the Visibility field, select Custom Condition.
    3. To the right of the Visibility field, click the Gear icon.
    4. Set the Condition to Address Mode is equal to "Manually".
    5. Click Submit.
      Condition builder for the Address Mode equal "Manually."
    6. Click Save.
  8. In the Edit View: Customer window, click Back to return to the Edit View: Contact info window.
    The completed Customer View.
  9. Click Submit to save the Contact Info View.
    The completed Contact Info View.
  10. Click Save.

Confirm your work

  1. In the header of App Studio, click Preview.
  2. Create a new Incident Case.
  3. Navigate to the Customer Info Step.
  4. Enter the First Name, Last Name, and Email fields as required, then select the radio button labeled Manually.
  5. Confirm that your View populates with the fields necessary to manually enter an address.
    Address view that allows for manual entry of a Customer address.
  6. In the Address section, in the Country field, select United Kingdom. Note how the fields associated with the Address information change.
    Address information dynamically changes to match selected Country.
  7. Click the radio button labeled Using map.
  8. In the Location field enter 1 Main St. Note how the system dynamically provides suggestions for completing the address information.
    Using the Location field, the system dynamically provides address choices.
  9. Confirm that a map displays once you select an address.

This Challenge is to practice what you learned in the following Module:

Available in the following mission:

Return to mission
If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice